.action_container {
    @apply inline-flex items-center bg-white shadow-md rounded-lg;
    padding: 2px;
    height: 28px;
}

.action {
    @apply inline-flex items-center justify-center cursor-pointer rounded-lg;
    padding: 4px;
}

.action .like {
    @apply inline-flex items-center justify-center;
    width: 16px;
    height: 16px;
    background: url('./assets/like.svg') no-repeat center center;
}

.action:hover .like {
    background: url('./assets/like_selected.svg') no-repeat center center;
}

.action .dislike {
    @apply inline-flex items-center justify-center;
    width: 16px;
    height: 16px;
    background: url('./assets/dislike.svg') no-repeat center center;
}

.action:hover .dislike {
    background: url('./assets/dislike_selected.svg') no-repeat center center;
}

.action.action_like_active {
    @apply bg-blue-50;
}

.action.action_like_active .like {
    background: url('./assets/like_selected.svg') no-repeat center center;
}

.action.action_dislike_active {
    @apply bg-red-50;
}

.action.action_dislike_active .dislike {
    background: url('./assets/dislike_selected.svg') no-repeat center center;
}
